<template>
  <BasePage title="学校数据统计" description="查看全校数据统计信息">
    <!-- 统计卡片区域 -->
    <div class="grid grid-cols-2 gap-4 mb-6">
      <StatusCard 
        status="success" 
        title="上报完成率" 
        :description="`${statistics.reportCompletionRate}%`"
      >
        <div class="mt-2">
          <div class="w-full bg-gray-200 rounded-full h-2.5">
            <div 
              class="bg-green-500 h-2.5 rounded-full" 
              :style="{width: `${statistics.reportCompletionRate}%`}"
            ></div>
          </div>
          <div class="flex justify-between text-xs mt-1">
            <span>{{ statistics.reportedCount }}/{{ statistics.totalCount }}</span>
            <span>{{ statistics.reportCompletionRate }}%</span>
          </div>
        </div>
      </StatusCard>
      
      <StatusCard 
        status="warning" 
        title="待确认数" 
        :description="statistics.pendingConfirmCount.toString()"
      >
        <div class="mt-2 text-sm">
          <div class="flex justify-between">
            <span class="text-gray-500">已确认</span>
            <span>{{ statistics.confirmedCount }}</span>
          </div>
          <div class="flex justify-between">
            <span class="text-gray-500">待确认</span>
            <span class="font-medium text-amber-500">{{ statistics.pendingConfirmCount }}</span>
          </div>
        </div>
      </StatusCard>
    </div>
    
    <!-- 学院上报情况 -->
    <div class="bg-white rounded-lg shadow-sm overflow-hidden mb-6">
      <div class="p-4 border-b border-gray-100">
        <h3 class="text-lg font-medium text-gray-800">学院上报情况</h3>
        <p class="text-sm text-gray-500 mt-1">各学院上报完成情况统计</p>
      </div>
      
      <div class="divide-y divide-gray-100">
        <div 
          v-for="(college, index) in collegeReports" 
          :key="index"
          class="p-4"
        >
          <div class="flex justify-between items-center mb-2">
            <div class="font-medium">{{ college.name }}</div>
            <div class="text-sm">
              <span :class="{
                'text-green-500': college.completionRate === 100,
                'text-amber-500': college.completionRate >= 50 && college.completionRate < 100,
                'text-red-500': college.completionRate < 50
              }">
                {{ college.completionRate }}%
              </span>
            </div>
          </div>
          <div class="w-full bg-gray-200 rounded-full h-2">
            <div 
              class="h-2 rounded-full" 
              :class="{
                'bg-green-500': college.completionRate === 100,
                'bg-amber-500': college.completionRate >= 50 && college.completionRate < 100,
                'bg-red-500': college.completionRate < 50
              }"
              :style="{width: `${college.completionRate}%`}"
            ></div>
          </div>
          <div class="flex justify-between text-xs mt-1">
            <span class="text-gray-500">{{ college.reportedCount }}/{{ college.totalCount }}</span>
            <span class="text-gray-500">{{ college.lastReportTime }}</span>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 上报趋势图 -->
    <div class="bg-white rounded-lg shadow-sm overflow-hidden mb-6">
      <div class="p-4 border-b border-gray-100">
        <h3 class="text-lg font-medium text-gray-800">上报趋势</h3>
        <p class="text-sm text-gray-500 mt-1">近7天上报数据趋势</p>
      </div>
      
      <div class="p-4">
        <!-- 这里可以集成图表库如ECharts或Chart.js -->
        <div class="h-64 flex items-center justify-center bg-gray-50 rounded">
          <div class="text-center">
            <BarChart class="w-12 h-12 text-gray-400 mx-auto" />
            <p class="mt-2 text-sm text-gray-500">趋势图将在这里显示</p>
            <p class="text-xs text-gray-400">可集成ECharts或Chart.js等图表库</p>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 异常情况统计 -->
    <div class="bg-white rounded-lg shadow-sm overflow-hidden">
      <div class="p-4 border-b border-gray-100">
        <h3 class="text-lg font-medium text-gray-800">异常情况统计</h3>
        <p class="text-sm text-gray-500 mt-1">上报异常及处理情况</p>
      </div>
      
      <div class="p-4">
        <div class="grid grid-cols-2 gap-4">
          <div class="bg-red-50 p-3 rounded-lg">
            <div class="text-red-500 font-medium">{{ statistics.abnormalCount }}</div>
            <div class="text-sm text-gray-600 mt-1">异常上报总数</div>
          </div>
          
          <div class="bg-amber-50 p-3 rounded-lg">
            <div class="text-amber-500 font-medium">{{ statistics.pendingAbnormalCount }}</div>
            <div class="text-sm text-gray-600 mt-1">待处理异常</div>
          </div>
          
          <div class="bg-green-50 p-3 rounded-lg">
            <div class="text-green-500 font-medium">{{ statistics.resolvedAbnormalCount }}</div>
            <div class="text-sm text-gray-600 mt-1">已处理异常</div>
          </div>
          
          <div class="bg-blue-50 p-3 rounded-lg">
            <div class="text-blue-500 font-medium">{{ statistics.exemptCount }}</div>
            <div class="text-sm text-gray-600 mt-1">免上报申请</div>
          </div>
        </div>
      </div>
      
      <!-- 异常类型分布 -->
      <div class="p-4 border-t border-gray-100">
        <h4 class="font-medium text-gray-700 mb-3">异常类型分布</h4>
        
        <div class="space-y-3">
          <div v-for="(type, index) in abnormalTypes" :key="index">
            <div class="flex justify-between text-sm mb-1">
              <span>{{ type.name }}</span>
              <span>{{ type.percentage }}%</span>
            </div>
            <div class="w-full bg-gray-200 rounded-full h-2">
              <div 
                class="bg-blue-500 h-2 rounded-full" 
                :style="{width: `${type.percentage}%`}"
              ></div>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 导出按钮 -->
    <div class="fixed bottom-20 right-4">
      <button 
        @click="exportData" 
        class="bg-blue-500 text-white rounded-full p-3 shadow-lg hover:bg-blue-600 transition-colors"
      >
        <Download class="w-6 h-6" />
      </button>
    </div>
  </BasePage>
</template>

<script setup>
import { ref } from 'vue';
import BasePage from '../../components/BasePage.vue';
import StatusCard from '../../components/StatusCard.vue';
import { BarChart, Download } from 'lucide-vue-next';

// 统计数据
const statistics = ref({
  reportCompletionRate: 87,
  reportedCount: 26,
  totalCount: 30,
  pendingConfirmCount: 8,
  confirmedCount: 18,
  abnormalCount: 12,
  pendingAbnormalCount: 5,
  resolvedAbnormalCount: 7,
  exemptCount: 3
});

// 学院上报情况
const collegeReports = ref([
  {
    name: '计算机学院',
    completionRate: 100,
    reportedCount: 5,
    totalCount: 5,
    lastReportTime: '今天 09:15'
  },
  {
    name: '机械工程学院',
    completionRate: 92,
    reportedCount: 11,
    totalCount: 12,
    lastReportTime: '今天 08:45'
  },
  {
    name: '经济管理学院',
    completionRate: 75,
    reportedCount: 6,
    totalCount: 8,
    lastReportTime: '昨天 17:30'
  },
  {
    name: '外国语学院',
    completionRate: 80,
    reportedCount: 4,
    totalCount: 5,
    lastReportTime: '今天 08:20'
  },
  {
    name: '艺术设计学院',
    completionRate: 0,
    reportedCount: 0,
    totalCount: 3,
    lastReportTime: '无上报记录'
  }
]);

// 异常类型分布
const abnormalTypes = ref([
  { name: '身体不适', percentage: 42 },
  { name: '家庭原因', percentage: 25 },
  { name: '交通问题', percentage: 17 },
  { name: '其他原因', percentage: 16 }
]);

// 导出数据
const exportData = () => {
  // 模拟导出功能
  console.log('导出统计数据');
  alert('统计数据导出成功');
  
  // 实际应用中，这里会调用导出API或生成Excel/PDF文件
};
</script>